<template>
  <div class="content">
      <el-row :gutter="20">
          <el-col :span="12">
              <el-button type="primary" :icon="CirclePlus" @click="onEdit(0)">添加</el-button>
          </el-col>
          <el-col :span="12" class="text-right">
              <el-input class="ml5" v-model="form.search" style="width: 240px" placeholder="请输入关键词" />
              <el-button type="primary" class="ml10" :icon="Search" @click="onSearch">搜索</el-button>
              <el-button type="primary" class="ml10" :icon="RefreshRight" @click="onSearch('Refresh')" />
          </el-col>
      </el-row>
      <el-table class="mt20" :data="tableData" :border="form.parentBorder" v-loading="form.loading" style="width: 100%;font-size: 16px;">
          <el-table-column type="index" :index="indexMethod" label="序号" width="60" align="center" />
          <el-table-column label="合同名称" show-overflow-tooltip align="center">
              <template #default="scope">
                  <el-link type="primary" @click="onTemplate(scope.row.id)">{{scope.row.title}}</el-link>
              </template>
          </el-table-column>
          <el-table-column prop="price" label="合同金额" show-overflow-tooltip align="center" />
          <el-table-column prop="b_name" label="销售方" show-overflow-tooltip align="center" />
          <el-table-column label="合同清单" show-overflow-tooltip align="center">
              <template #default="scope">
                  <el-link type="primary" @click="onDetails(scope.row.details)">查看</el-link>
              </template>
          </el-table-column>
          <el-table-column label="申请日期" show-overflow-tooltip align="center">
              <template #default="scope">
                  <el-text v-if="scope.row.application">{{scope.row.application.created_at}}</el-text>
              </template>
          </el-table-column>
          <el-table-column label="申请状态" show-overflow-tooltip align="center">
              <template #default="scope">
                  <div v-if="scope.row.application">
                      <el-text type="primary" v-if="scope.row.application" @click="onApplyRecord(scope.row)" class="cp">{{scope.row.application.status_text}}</el-text>
                  </div>
              </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="120" align="center">
              <template #default="scope">
                  <el-link type="primary" @click="onEdit(scope.row.id)" >编辑</el-link>
                  
                  <el-popconfirm title="确定要删除么?" @confirm="onDelete(scope.row.id)">
                      <template #reference>
                          <el-link type="danger"  v-if="scope.row.is_process == 0">删除</el-link>
                      </template>
                  </el-popconfirm>
              </template>
          </el-table-column>
      </el-table>
      <div class="mt20">
          <el-pagination v-model:current-page="form.current" v-model:page-size="form.limit" :page-sizes="[10, 20, 30, 40, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="form.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
  </div>

  <el-dialog v-model="isEdit" title="材料采购" width="1280px">
      <component :is="Edit" :id = editId :type="form.type" />
  </el-dialog>

  <el-dialog v-model="isDetails" title="合同清单" width="80%">
      <el-table :data="tableDetails" style="width: 100%;font-size: 16px;height: auto !important;">
          <el-table-column type="index" :index="indexMethod" label="序号" width="60" align="center" />
          <el-table-column prop="name" label="项目名称" show-overflow-tooltip align="center" />
          <el-table-column prop="content" label="施工内容" show-overflow-tooltip align="center" />
          <el-table-column prop="unit" label="单位" show-overflow-tooltip align="center" />
          <el-table-column prop="unit_price" label="材料单价（含税）" show-overflow-tooltip align="center" />
          <el-table-column prop="work_quantity" label="工程量" show-overflow-tooltip align="center" />
          <el-table-column prop="price" label="合价" show-overflow-tooltip align="center" />
          <el-table-column prop="remarks" label="备注" show-overflow-tooltip align="center" />
      </el-table>
  </el-dialog>

  <el-dialog v-model="isTemplate" title="合同模板" width="980px">
      <component v-if="form.type == 'Labor'" :is="laborTemplate" :id = editId />
      <component v-else :is="materialTemplate" :id = editId />
  </el-dialog>

  <el-dialog v-model="isApplyRecord" title="申请进度" width="50%">
      <component :is="applyRecord" :id = editId />
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { RefreshRight, Search,CirclePlus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import http from '../../../../util/request';
import applyRecord from "@/components/applyRecord.vue";
import Edit from "./editPurchase.vue";
import materialTemplate from "../../material/components/template.vue";
import laborTemplate from "../../labor/components/template.vue";
const indexMethod = (index: number) => {
return index+= 1
}

const editId = ref(0)
const isApplyRecord = ref(false)
const isEdit = ref(false)
const isDetails = ref(false)
const tableDetails = ref<any>([])
const isTemplate = ref(false)

const form = ref<any>({search:'',page:0,current:0,total:10,limit:20,loading:false,parentBorder:false})
interface Contract {
  id: number
  title: string
  created_at: string
  start_date: string
  end_date: string
  status: string
}
const tableData = ref<Contract[]>([])

const onGetData = () => {
  
  form.value.loading = true
  http.post('/contract',form.value).then((response:any)=>{
      form.value.loading = false
      response.data.data.forEach((e:any) => {
          e.is_apply = true
          if(e.application){
              if(e.application.status == 'approved'){
                  e.is_apply = false
              }
              if(e.application.status == 'pending'){
                  e.is_apply = false
              }
          }
      });
      tableData.value = response.data.data
      form.value.total = response.data.total
  })
}

const onSearch = (type = '') => {
  if(type == 'Refresh'){
      form.value.search = ''
      onGetData()
      return
  }
  if(!form.value.search){
      ElMessage.error('请输入搜索内容')
  }
  form.value.page = 1
  onGetData()
}


const onEdit = (data: number) => {
  editId.value = data;
  isEdit.value = true
}

const onTemplate = (data: number) => {
  editId.value = data;
  isTemplate.value = true
}

const onDelete = (id: number) => {
  http.delete('/contract/'+id).then((response:any)=>{
      if(response.data.code != 200){
          ElMessage.error(response.data.msg);return;
      }
      ElMessage.success(response.data.msg);
      onGetData();
  })
}

const onDetails = (data:any) => {
  tableDetails.value = data
  isDetails.value = true;
}

const onApplyRecord = (data: any) => {
  if(data.application){
      editId.value = data.application.id
      isApplyRecord.value = true
  }
}

const handleSizeChange = (val: number) => {
  form.value.limit = val
  onGetData()
}
const handleCurrentChange = (val: number) => {
  form.value.page = val
  onGetData()
}

</script>

<style scoped>

</style>